<template>
  <div id="hello">
    <h1 class="title aaa">企业认证</h1>
    <el-form :inline="true" :model="formData" :rules="rules" class="formone">
      <el-form-item label="企业名称"  prop="name">
        <el-input v-model="formData.name" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="社会统一信用代码"  prop="code">
        <el-input v-model="formData.code" placeholder=""></el-input>
      </el-form-item>
      <!-- <el-form-item>
        <el-button type="primary" @click="onSubmit">查询</el-button>
      </el-form-item> -->
    </el-form>
    <el-form :rules="rules" class="upload">
      <el-form-item label="企业营业执照照片"  prop="code">
        <el-upload
          class="upload-demo"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-success="upload()"
          multiple>
          <img src="../../assets/img/business.png" alt="" class="el-icon-upload">
          <div class="el-upload__text">请上传营业执照</div>
        </el-upload>
      </el-form-item>
    </el-form>
    <el-form :inline="true" :model="formData" :rules="rules" class="formone">
      <el-form-item label="法人姓名"  prop="fname">
        <el-input v-model="formData.fname" placeholder=""></el-input>
      </el-form-item>
      <el-form-item label="法人身份证号"  prop="fcard">
        <el-input v-model="formData.fcard" placeholder=""></el-input>
      </el-form-item>
    </el-form>
    <el-form :rules="rules" class="upload">
      <el-form-item label="企业营业执照照片"  prop="code">
        <el-upload
          class="upload-demo"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-success="upload()"
          multiple>
          <img src="../../assets/img/card.png" alt="" class="el-icon-upload">
          <div class="el-upload__text">请上传营业执照</div>
        </el-upload>
         <el-upload
          class="upload-demo"
          drag
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-success="upload()"
          multiple>
          <img src="../../assets/img/card.png" alt="" class="el-icon-upload">
          <div class="el-upload__text">请上传营业执照</div>
        </el-upload>
      </el-form-item>
    </el-form>
    <div class="submit">
      <button>取消</button>
      <button>保存</button>
    </div>
  </div>
</template>

<script>
export default {
  name: "hello",
  data() {
    return {
      formData: {
        name: "",
        code: "",
        fname: "",
        fcard: "",
      },
      rules:{
        name: { required: true, message: '企业名称不能为空', trigger: 'blur' },
        code: { required: true, message: '社会统一信用代码不能为空', trigger: 'blur' },
        fname: { required: true, message: '法人姓名不能为空', trigger: 'blur' },
        fcard: [{ required: true, message: '法人身份证号不能为空', trigger: 'blur' },{
            pattern:
/^[1-9]\d{5}(18|19|20|(3\d))\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/,
            message: "输入的身份证号不合法",
            trigger: "blur"
        }]
      }
    };
  },
  created() {},
  mounted() {},
  methods: {
    upload(response, file, fileList){
      console.log(response);
      console.log(file);
      console.log(fileList);
    }
  }
};
</script>

<style lang="scss">
  .upload {
    .el-upload-dragger {
      width:310px;
      height:218px;
      border:1px solid rgba(0,0,0,0.2);
      border-radius:5px;
      margin-top: 10px;
      .el-icon-upload {
        width: 100px;
      }
      .el-upload__text {
        margin-top: -40px;
        color:rgba(0,0,0,0.4);
      }
      .upload-demo {
        display: inline-block;
      }
    }
  }
</style>
<style lang="scss" scoped>
#hello {
  // height: 100%;
  background-color: #fff;
  padding: 24px;
  padding-bottom: 50px;
  box-sizing: border-box;
  // 设置宽高
  .title {
    color: rgba(0, 0, 0, 0.95);
    line-height: 56px;
    font-size: 22px;
    border-bottom: 1px solid rgba(86, 170, 255, 0.1);
    position: relative;
    &:after {
      content: "";
      display: block;
      width: 28px;
      height: 4px;
      background: rgba(86, 170, 255, 1);
      border-radius: 2px;
      position: absolute;
      top: -0px;
    }
  }
  .formone{
    margin-top: 24px;
  }
  .upload {
    .upload-demo {
      margin-right: 40px;
      display: inline-block;
    }
  }
  .submit {
    text-align: center;
    button {
      margin: 25px;
      width:152px;
      height:52px;
      border:2px solid rgba(86,170,255,1);
      border-radius:26px;
      color: rgba(86,170,255,1);
      &:nth-of-type(2) {
        background: rgba(86,170,255,1);
        color: #fff;
      }
    }
  }
}
</style>
